<template lang="html">
  <div class="withdrawal">
    <div class="main">
      <div class="input">
        <span>￥</span>
        <input type="text" name="" v-model="txMoney" placeholder="" @input="regMoney">
      </div>
      <div class="info">
        <div class="balance">
          账户余额：￥{{ balanceMoney }}
        </div>
        <div class="all-balance" @click="txMoney = balanceMoney">
          全部提现
        </div>
      </div>
    </div>
    <div class="btn-cash" @click="clickTx()">
      提现
    </div>
    <p class="tips">
      提现预计3-5个工作日到账
    </p>
  </div>
</template>

<script>
import { getMoneybagBalance, moneybagWithdrawal } from '@/api/modules/moneybag'
import { Toast  } from 'mint-ui';
export default {
  data() {
    return {
      balanceMoney: '0.00',
      txMoney: null,
    }
  },
  created() {
    this.getMoneybagBalance();
  },
  methods: {
    // 获取我的余额
    getMoneybagBalance() {
      getMoneybagBalance({
        uid: this.getUserInfo().id,
      }).then(res=>{
        this.balanceMoney = res.data.balance;
      })
    },
    // 点击提现
    clickTx() {
      if(!this.txMoney){
        Toast('请输入提现金额')
      }else if (this.txMoney > this.balanceMoney) {
        Toast('提现金额不能大于余额')
      }else{
        this.moneybagWithdrawal();
      }
    },
    // 验证输入的金额
    regMoney() {
      if (this.txMoney.toString().indexOf(".") > 0) {
        if (this.txMoney.toString().split(".")[1].length > 2) {
          Toast("保留至小数点后两位");
          this.txMoney = Number(this.txMoney).toFixed(2);
        }
      }
    },
    // 提现
    moneybagWithdrawal() {
      moneybagWithdrawal({
        uid: this.getUserInfo().id,
        money: this.txMoney
      }).then(res=>{
        if(res.code == 1){
          Toast(res.msg)
        }else{
          this.$router.push('/modules/moneybag/status?money='+this.txMoney);
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.withdrawal{
  .main{
    background-color: #fff;
    border-radius: .4rem;
    padding: .88rem;
    margin-left: .28rem;
    margin-right: .334rem;
    margin-top: .3rem;
    box-shadow:2px 1px 7px 0px rgba(220,215,215,1);
    .input{
      border-bottom: 1px solid #E6E3E3;
      padding-bottom: .3rem;
      margin-bottom: .4rem;
      span{
        color: #211F1F;
        font-size: .773rem;
      }
      input{
        font-size: .9rem;
        width: 6.7rem;
      }
    }
    .info{
      overflow: hidden;
      .balance{
        float: left;
        color: #999999;
        font-weight: 600;
      }
      .all-balance{
        float: right;
        color: #36A5F8;
        font-weight: 600;
      }
    }
  }
  .btn-cash{
    background-color: #36A5F8;
    width: 8.53rem;
    margin: 0 auto;
    margin-top: 2rem;
    color: #fff;
    text-align: center;
    line-height: 1.257rem;
    border-radius: 2rem;
    font-size: .427rem;
    letter-spacing: 2px;
  }
  .tips{
    text-align: center;
    color: #9B9B9B;
    margin-top: .3rem;
  }
}
</style>
